<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>默认点标记</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .select-icon,
        .add-icon {
            width: 25px;
            height: 34px;
            background-image: url("//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png");
            background-size: 25px 34px;
            box-sizing: border-box;
            text-align: center;
            line-height: 22px;
            color: #FFF;
            font-size: 13px;
        }
		.select-icon {
			background-image: url("//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png");
		}


   

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}

.add-icon:hover {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15"></script>
<script type="text/javascript">
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });
    marker = new AMap.Marker({
        content: '<div class="select-icon">选</div>',
        position: [map.getCenter().lng,map.getCenter().lat],
        offset: new AMap.Pixel(-13, -30)
    });
    
    
    marker.setMap(map);
    map.on("click",function(e){
    	marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); //更新点标记位置
    	doSend(e.lnglat.getLng(), e.lnglat.getLat());
    });
 
 	var doSend = function(lng,lat){
 		console.info({"lng":lng,"lat":lat});
 		let e = new CustomEvent("map-select");
 		e.data={"lng":lng,"lat":lat};
 		window.dispatchEvent(e);
 	}
 	
 	window.setTimeout(function(){
 		doSend(map.getCenter().lng,map.getCenter().lat);
 	},1000);
 	
 	
 	
 	var list = [];
 	
 	window.add = function(title,lng,lat,data){
 		let temp = new AMap.Marker({
	        position: [lng,lat],
	        offset: new AMap.Pixel(-13, -30)
	    });
	    let div = document.createElement("div");
	    div.innerText=list.length+1;
	    div.setAttribute("title",title);
	    div.className="add-icon";
	    temp.setContent(div);
	    temp.setMap(map);
	    temp.index = list.length;
	    temp.on("click",function(){
	    	console.info(data);
	 		let e = new CustomEvent("map-item");
	 		e.data=data;
	 		e.index=temp.index;
	 		window.dispatchEvent(e);
	    });
	    list.push(temp);
 	}
 	window.clear = function(){
 		for(let i=0;i<list.length;i++){
 			list[i].setMap(null);
 		}
 		list=[];
 	}
 	window.setCenter = function(lng,lat){
 		map.setCenter([lng,lat]); 
 	}
</script>
</body>
</html>